<template>
  <div id="login">
    <div class="locontainer">
      <img src="../assets/logo.png" alt="" class="logo">
      <div class="login-form">
        <!--        <img src="../assets/login/form.png" alt="" class="login-form__background">-->
        <div class="input-group">
          <div class="title">用户登录</div>
          <div class="input-row">
            <input type="text" class="input" name="username" placeholder="请输入用户名"
                   v-model="username">
          </div>
          <div class="input-row">
            <input type="password" class="input" name="password" placeholder="请输入您的密码"
                   v-model="password">
          </div>
          <div class="input-row">
            <input type="text" v-model="icaptcha" placeholder="请输入验证码" class="captcha">
            <img :src="captcha.image_base" alt="验证码" @click="get_captcha" class="captcha-img">
          </div>
          <div class="tools">
            <router-link class="forgot" to="forgot">忘记密码?</router-link>
          </div>
          <input type="submit" value="登录" @click="login">
          <div class="to-register">
            没有账号？
            <router-link to="register">点击注册</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loading: false,
      username: '',
      password: '',
      icaptcha: '',
      captcha: {
        id: 0,
        image_base: ''
      },
    };
  },
  created() {
    this.get_captcha();
  },
  methods: {
    login() {

      // 删除前后空白字符
      let username = this.username.trim();
      let password = this.password.trim();
      let icaptcha = this.icaptcha.trim();

      // 简单判断是否为空, 节省请求资源
      if (username === '' || password === '' || password.length <= 0 || icaptcha === '' && icaptcha.length <= 0) {
        // Message.
        this.$message.error('用户名、密码、验证码不能为空!');
        return false;
      }

      // 发起登录请求
      this.$request.exec('post', 'login',
        {
          username: username,
          password: password,
          image_id: this.captcha.id,
          captcha_code: icaptcha,
        }, this, true)
        .then((res) => {
          if (res.code === 1 && res.msg === '登陆成功') {
            this.$message.success(res.msg);
            // 设置登录状态和用户信息
            this.$store.commit('login', res.data.user);

            localStorage.setItem('FLAWPLATFORM_TOKEN', res.data.token);

            let next = this.$route.query.next;
            if (this.$route.query.next) {
              this.$router.push({ path: next });
              return false;
            }
            this.$router.push('/');
          }
        })
        .catch((res) => {
          // 表单填写错误！！
          if (res.status === 417) {
            let d = res.data.data;
            if (d.hasOwnProperty('__all__')) {
              this.$message.error(d.__all__[0]);
            } else if (d.hasOwnProperty('username') || d.hasOwnProperty('password')) {
              this.$message.error('用户名、密码不能为空!');
            }
          }
        });
    },
    get_captcha() {
      this.$request.exec('get', 'get_captcha', null, this)
        .then((res) => {
          this.captcha = res.data;
        })
        .catch((res) => {
          this.$message.error(res.data.msg);
        });
    },
  },
};
</script>

<style scoped>

* {
  user-select: none;
}

.to-register {
  font-size: .9vw;
  text-align: center;
  margin-top: 1vw;
}

#login {
  height: 100vh;
  background-image: url("../assets/login/background.png");
  background-size: cover;
  background-position: center center;
}

.locontainer {
  width: 40vw;
  margin: 0 auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.logo {
  display: block;
  width: 24vw;
  margin: 0 auto;
}

.login-form {
  position: relative;
  background: url("../assets/login/form.png") 0 0 / 100% 100%;
}

.input-group {
  width: 100%;
  height: 100%;
  padding: 3vw 5vw;
  color: #fff;
}

.title {
  font-size: 1.4vw;
  font-weight: normal;
  font-stretch: normal;
  color: #ffffff;
  text-align: center;
}

.input-row {
  margin-top: 1.75vw;
  font-size: 0;
}

.input-row * {
  vertical-align: middle;
}

.input-row .input {
  width: 100%;
  font-size: 1.05vw;
  color: #ececec;
  background: #12357080;
  padding: .6vw .9vw;
  border: 1px solid #0384aa;
}

input::-webkit-input-placeholder {
  color: #b3b3b3;
  font-size: .94vw;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #b3b3b3;
  font-size: .94vw;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
  color: #b3b3b3;
  font-size: .94vw;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #b3b3b3;
  font-size: .94vw;
}

.tools {
  text-align: right;
  /*margin: 1.25vw 0;*/
  font-size: 0;
  margin-top: -1.4vw;
  margin-bottom: 1.75vw;
}

.forgot {
  font-size: 1vw;
  color: #b3b3b3;
}

input[type="submit"] {
  background: url("../assets/login/submit.png") 0 0 / 100% 100%;
  border: none;
  color: #ffffff;
  /*height: 2.8vw;*/
  padding: .6vw;
  width: 100%;
  font-size: .94vw;
  cursor: pointer;
  margin: 0 !important;
}

.captcha {
  width: 12vw;
  margin-right: 1vw;
  background: #12357080;
  height: 2.8vw;
  font-size: 1.05vw;
  padding: .6vw .9vw;
  border: 1px solid #0384aa;
  color: #ececec;
}

.captcha-img {
  cursor: pointer;
  height: 2.7vw;
}

</style>
